import Link from 'next/link'
import { Button } from 'antd'
import Router from 'next/router'
import { connect } from 'react-redux'
import getConfig from 'next/config'
import { useEffect } from 'react'
import axios from 'axios'

const { publicRuntimeConfig } = getConfig()

import { add } from '../store/store'

const Index = ({ counter, username, rename, add }) => {

  function handleClick() {
    Router.push({
      pathname: '/test/b',
      query: {
        id: 2
      }
    }, '/test/b/2')
  }

  useEffect(()=>{
    axios.get('/api/user/info').then(res => {
      console.log(res)
    })
  }, [])

  return (
    <>
      <h1>counter: { counter }</h1>
      <h1>username: { username }</h1>
      <input value={username} onChange={(e) => rename(e.target.value)} />
      <button onClick={() => add(counter)}>do add </button>
      <a href={publicRuntimeConfig.OAUTH_URL}>登录</a>
    </>
  )
}

Index.getInitialProps = async ({ reduxStore }) => {
  reduxStore.dispatch(add(3))
  return {}
}

export default connect(function mapStateToProps(state){
  return {
    counter: state.counter.count,
    username: state.user.username
  }
}, function mapDispatchToProps(dispatch) {
  return {
    add: (num) => {
      dispatch({type: 'ADD', num })
    },
    rename: (username) => {
      dispatch({ type: 'UPDATE_USERNAME', username })
    }
  }
})(Index)